<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <uni-forms ref="formRef" :model-value="formData" :rules="rules">
    <uni-forms-item name="disease">
      <view class="cu-form-group">
        <view class="title">置管原因（疾病类型）</view>
        <input placeholder="请输入置管原因" name="input"/>
      </view>
    </uni-forms-item>
    <uni-forms-item name="firstCatheter">
      <view class="cu-form-group">
        <view class="title">是否为首次置管</view>
        <view>
          <radio-group class="block" @change="firstCatheterChange">
            <label>
              <radio class='green radio' :class="formData.firstCatheter==='否'?'checked':''"
                     :checked="formData.firstCatheter==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.firstCatheter==='是'?'checked':''"
                     :checked="formData.firstCatheter==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <!--    <uni-forms-item name="catheterOpportunity">-->
    <!--      <view class="cu-form-group">-->
    <!--        <view class="title">置管时机</view>-->
    <!--        <radio-group class="block" @change="catheterOpportunityChange">-->
    <!--          <label>-->
    <!--            <radio class='blue radio' :class="formData.catheterOpportunity==='首次化疗前'?'checked':''"-->
    <!--                   :checked="formData.catheterOpportunity==='首次化疗前'" value="首次化疗前"></radio>-->
    <!--            首次化疗前</label>-->
    <!--          <label>-->
    <!--            <radio class='red margin-left-sm' :class="formData.catheterOpportunity==='第二次化疗前'?'checked':''"-->
    <!--                   :checked="formData.catheterOpportunity==='第二次化疗前'" value="第二次化疗前"></radio>-->
    <!--            第二次化疗前</label>-->
    <!--          <label>-->
    <!--            <radio class='green margin-left-sm' :class="formData.catheterOpportunity==='第三次化疗及以上'?'checked':''"-->
    <!--                   :checked="formData.catheterOpportunity==='第三次化疗及以上'" value="第三次化疗及以上"></radio>-->
    <!--            第三次化疗及以上</label>-->

    <!--        </radio-group>-->
    <!--      </view>-->
    <!--    </uni-forms-item>-->
    <uni-forms-item name="catheterOpportunity">
      <view class="cu-form-group">
        <view class="title">置管时机</view>
        <picker @change="catheterOpportunityChange" :value="catheterOpportunityIndex"
                :range="catheterOpportunityOptions">
          <view class="picker">
            {{ catheterOpportunityIndex > -1 ? catheterOpportunityOptions[catheterOpportunityIndex] : '请选择置管时机' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterModel">
      <view class="cu-form-group">
        <view class="title">导管模式</view>
        <picker @change="catheterModelChange" :value="catheterModelIndex" :range="catheterModelOptions">
          <view class="picker">
            {{ catheterModelIndex > -1 ? catheterModelOptions[catheterModelIndex] : '请选择导管模式' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterSpecification">
      <view class="cu-form-group">
        <view class="title">导管规格</view>
        <picker @change="catheterSpecificationChange" :value="catheterSpecificationIndex"
                :range="catheterSpecificationOptions">
          <view class="picker">
            {{ catheterSpecificationIndex > -1 ? catheterSpecificationOptions[catheterSpecificationIndex] : '请选择导管规格' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <!--    <uni-forms-item>-->
    <!--      <view class="cu-form-group">-->
    <!--        <view class="title">导管批号</view>-->
    <!--        <input placeholder="输入框带个按钮" name="input"/>-->
    <!--      </view>-->
    <!--    </uni-forms-item>-->
    <uni-forms-item name="catheterLength">
      <view class="cu-form-group">
        <view class="title">导管长度</view>
        <input v-model="formData.catheterLength" placeholder="请输入使用导管长度" name="input"/>
        <view class='shadow'>cm</view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="punctureMethod">
      <view class="cu-form-group">
        <view class="title">穿刺方法</view>
        <picker @change="punctureMethodChange" :value="punctureMethodIndex" :range="punctureMethodOptions">
          <view class="picker">
            {{ punctureMethodIndex > -1 ? punctureMethodOptions[punctureMethodIndex] : '请选择穿刺方法' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterSite">
      <view class="cu-form-group">
        <view class="title">置管部位</view>
        <picker @change="catheterSiteChange" :value="catheterSiteIndex" :range="catheterSiteOptions">
          <view class="picker">
            {{ catheterSiteIndex > -1 ? catheterSiteOptions[catheterSiteIndex] : '请选择置管部位' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterArm">
      <view class="cu-form-group">
        <view class="title">置管手臂</view>
        <picker @change="catheterArmChange" :value="catheterArmIndex" :range="catheterArmOptions">
          <view class="picker">
            {{ catheterArmIndex > -1 ? catheterArmOptions[catheterArmIndex] : '请选择置管手臂' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterVein">
      <view class="cu-form-group">
        <view class="title">置管静脉</view>
        <picker @change="catheterVeinChange" :value="catheterVeinIndex" :range="catheterVeinOptions">
          <view class="picker">
            {{ catheterVeinIndex > -1 ? catheterVeinOptions[catheterVeinIndex] : '请选择置管静脉' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterTipPosition">
      <view class="cu-form-group">
        <view class="title">置管尖端位置</view>
        <picker @change="catheterTipPositionChange" :value="catheterTipPositionIndex"
                :range="catheterTipPositionOptions">
          <view class="picker">
            {{ catheterTipPositionIndex > -1 ? catheterTipPositionOptions[catheterTipPositionIndex] : '请选择导管尖端位置' }}
          </view>
        </picker>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterInsertionLength">
      <view class="cu-form-group">
        <view class="title">置管插入长度</view>
        <input v-model="formData.catheterInsertionLength" placeholder="请输入导管插入长度" name="input"/>
        <view>cm</view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterExposedLength">
      <view class="cu-form-group">
        <view class="title">置管暴露长度</view>
        <input v-model="formData.catheterExposedLength" placeholder="请输入导管暴露长度" name="input"/>
        <view>cm</view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="images">
      <view class="cu-form-group">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in formData.images" :key="index" @tap="viewImage"
                :data-url="prefix+formData.images[index]">
<!--            <image :src="'http://127.0.0.1:82/chat'+formData.images[index]" mode="aspectFill"></image>-->
            <MrImage :src="formData.images[index]"></MrImage>
            <view class="cu-tag bg-red" @tap.stop="delImage" :data-index="index">
              <text class='cuIcon-close'></text>
            </view>
          </view>
          <view class="solids" @tap="chooseImage" v-if="formData.images.length<4">
            <text class='cuIcon-cameraadd'></text>
          </view>
          <view v-if="formData.images.length===0" style="width: 65vw">
            <text>上传图片（检查单、CT、就诊过程图）</text>
          </view>
        </view>
      </view>
    </uni-forms-item>
  </uni-forms>
  <view class="flex flex-direction margin-bottom-xl">
    <button class="cu-btn bg-blue lg" @click="handle">提交</button>
  </view>

</template>

<script setup lang="ts">
import {defineEmits, ref} from "vue";
import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import MrImage from "@/components/common/MrImage.vue";
import {uploadFile,imagePathPrefix} from '/settings'
import MrCustom from "@/components/common/MrCustom.vue";
const url = uploadFile.url
const name =uploadFile.name
const prefix =imagePathPrefix

const emits = defineEmits(['onHandle'])
const formRef = ref()
const formData = ref({
  firstCatheter: '',  //是否为第一次
  catheterOpportunity: '',   //置管时机
  catheterModel: '',  //导管开口模式
  catheterSpecification: '',  //导管规格
  catheterLength: '', //导管长度
  punctureMethod: '', //穿刺方法
  catheterSite: '', //置管部位
  catheterArm: '',// 置管手臂
  catheterVein: '',  //置管静脉
  catheterTipPosition: '',  //导管尖端位置
  catheterInsertionLength: 0,  //导管插入长度
  catheterExposedLength: 0, //导管暴露长度
})
const rules = ref()


const handle = () => {
  console.log(formData.value)
  uni.showModal({
    title: '提示',
    content: '确认提交？',
    success: function (res) {
      if (res.confirm) {
        emits('onHandle',formData.value)
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}

const viewImage = (e: any) => {
  let tmp =JSON.parse(JSON.stringify(formData.value.images))
  Object.keys(tmp).forEach(key=>{
    tmp[key]= prefix+tmp[key]
  })
  uni.previewImage({
    urls: tmp,
    current: e.currentTarget.dataset.url
  });
}
const delImage = (e: any) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这张图片吗？',
    cancelText: '取消',
    confirmText: '确认',
    success: res => {
      if (res.confirm) {
        formData.value.images.splice(e.currentTarget.dataset.index, 1)
      }
    }
  })
}
const chooseImage = () => {
  uni.chooseImage({
    count: 4, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: (res) => {
      uni.uploadFile({
        url: url,
        filePath: res.tempFilePaths[0],
        name: name,
        success: (uploadFileRes) => {
          let tmp = JSON.parse(uploadFileRes.data).data
          if (formData.value.images.length != 0) {
            formData.value.images = formData.value.images.concat(tmp)
          } else {
            formData.value.images = [tmp]
          }
        }
      });
    }
  });
}


const firstCatheterChange = (e: any) => {
  formData.value.firstCatheter = e.detail.value
}
const catheterOpportunityIndex = ref(-1)
const catheterOpportunityOptions = ref(['首次化疗前', '第二次化疗前', '第三次化疗及以上'])
const catheterOpportunityChange = (e: any) => {
  catheterOpportunityIndex.value = e.detail.value
  formData.value.catheterOpportunity = catheterOpportunityOptions.value[e.detail.value]
}
const catheterModelIndex = ref(-1)
const catheterModelOptions = ref(['双腔三向瓣模式', '单腔三向瓣模式'])
const catheterModelChange = (e: any) => {
  catheterModelIndex.value = e.detail.value
  formData.value.catheterModel = catheterModelOptions.value[e.detail.value]
}
const catheterSpecificationIndex = ref(-1)
const catheterSpecificationOptions = ref(['2Fr', '3Fr', '4Fr', '5Fr'])
const catheterSpecificationChange = (e: any) => {
  catheterSpecificationIndex.value = e.detail.value
  formData.value.catheterSpecification = catheterSpecificationOptions.value[e.detail.value]
}

const punctureMethodIndex = ref(-1)
const punctureMethodOptions = ref(['盲穿', '赛丁格技术', 'B超引导下'])
const punctureMethodChange = (e: any) => {
  punctureMethodIndex.value = e.detail.value
  formData.value.punctureMethod = punctureMethodOptions.value[e.detail.value]
}
const catheterSiteIndex = ref(-1)
const catheterSiteOptions = ref(['肘上', '肘下'])
const catheterSiteChange = (e: any) => {
  catheterSiteIndex.value = e.detail.value
  formData.value.catheterSite = catheterSiteOptions.value[e.detail.value]
}

const catheterArmIndex = ref(-1)
const catheterArmOptions = ref(['左侧', '右侧'])
const catheterArmChange = (e: any) => {
  catheterArmIndex.value = e.detail.value
  formData.value.catheterArm = catheterArmOptions.value[e.detail.value]
}

const catheterVeinIndex = ref(-1)
const catheterVeinOptions = ref(['贵要静脉', '肘正中静脉', '头静脉'])
const catheterVeinChange = (e: any) => {
  catheterVeinIndex.value = e.detail.value
  formData.value.catheterVein = catheterVeinOptions.value[e.detail.value]
}
const catheterTipPositionIndex = ref(-1)
const catheterTipPositionOptions = ref(['气管隆突上', '气管隆突下', 'B超引导下'])
const catheterTipPositionChange = (e: any) => {
  catheterTipPositionIndex.value = e.detail.value
  formData.value.catheterTipPosition = catheterTipPositionOptions.value[e.detail.value]
}


</script>

<style scoped>
.cu-form-group .title {
  min-width: calc(4em + 15px);
}
</style>
